<!DOCTYPE html>
<html lang="en">
  <head>
    ${require('./_head.html') title="Typography" description="All typographic
    elements are responsive, allowing text to scale gracefully across devices
    and viewports." canonical="typography.html" }
  </head>

  <body>
    ${require('./_nav.html')}

    <main class="container" id="docs">
      ${require('./_sidebar.html') active="typography-link"}

      <div role="document">
        <section id="typography">
          <hgroup>
            <h1>Typography</h1>
            <h2>
              All typographic elements are responsive, allowing text to scale
              gracefully across devices and viewports.
            </h2>
          </hgroup>
          <figure>
            <table role="grid">
              <thead>
                <tr>
                  <th>Device</th>
                  <th>Extra&nbsp;small</th>
                  <th>Small</th>
                  <th>Medium</th>
                  <th>Large</th>
                  <th>Extra&nbsp;large</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>Base&nbsp;font</th>
                  <td>16<small>px</small></td>
                  <td>17<small>px</small></td>
                  <td>18<small>px</small></td>
                  <td>19<small>px</small></td>
                  <td>20<small>px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>h1</b>&gt;</code></th>
                  <td>32<small>px</small></td>
                  <td>34<small>px</small></td>
                  <td>36<small>px</small></td>
                  <td>38<small>px</small></td>
                  <td>40<small>px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>h2</b>&gt;</code></th>
                  <td>28<small>px</small></td>
                  <td>29<small>px</small></td>
                  <td>31<small>.5px</small></td>
                  <td>33<small>.25px</small></td>
                  <td>35<small>px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>h3</b>&gt;</code></th>
                  <td>24<small>px</small></td>
                  <td>25<small>.5px</small></td>
                  <td>27<small>px</small></td>
                  <td>28<small>.5px</small></td>
                  <td>30<small>px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>h4</b>&gt;</code></th>
                  <td>20<small>px</small></td>
                  <td>21<small>.25px</small></td>
                  <td>22<small>.5px</small></td>
                  <td>23<small>.75px</small></td>
                  <td>25<small>px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>h5</b>&gt;</code></th>
                  <td>18<small>px</small></td>
                  <td>19<small>.125px</small></td>
                  <td>20<small>.25px</small></td>
                  <td>21<small>.375px</small></td>
                  <td>22<small>.5px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>h6</b>&gt;</code></th>
                  <td>16<small>px</small></td>
                  <td>17<small>px</small></td>
                  <td>18<small>px</small></td>
                  <td>19<small>px</small></td>
                  <td>20<small>px</small></td>
                </tr>
                <tr>
                  <th><code>&lt;<b>small</b>&gt;</code></th>
                  <td>14<small>px</small></td>
                  <td>14<small>.875px</small></td>
                  <td>15<small>.75px</small></td>
                  <td>16<small>.625px</small></td>
                  <td>27<small>.5px</small></td>
                </tr>
              </tbody>
            </table>
          </figure>
          <p>Headings:</p>
          <article aria-label="Headings examples">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
            <footer class="code">
              <pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
            </footer>
          </article>
          <p>
            Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
            <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
            <code><i>margin-bottom</i></code> are collapsed and the
            <code>:last-child</code> is muted.
          </p>
          <article aria-label="Hgroup example">
            <div class="headings">
              <h2>Heading 2</h2>
              <h3>Subtitle for heading 2</h3>
            </div>
            <footer class="code">
              <pre><code>&lt;<b>hgroup</b>&gt;
  &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
  &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>hgroup</b>&gt;</code></pre>

              <pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
  &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
  &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>
            </footer>
          </article>

          <p>Inline text elements:</p>
          <article aria-label="Inline text examples">
            <div class="grid">
              <div>
                <p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
                <p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
                <p>
                  <em>Italic</em> <code>i</code> <code>em</code>
                  <code>cite</code>
                </p>
                <p><del>Deleted</del> <code>del</code></p>
                <p><ins>Inserted</ins> <code>ins</code></p>
                <p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
              </div>
              <div>
                <p><mark>Highlighted</mark> <code>mark</code></p>
                <p><s>Strikethrough</s> <code>s</code></p>
                <p><small>Small </small> <code>small</code></p>
                <p>Text <sub>Sub</sub> <code>sub</code></p>
                <p>Text <sup>Sup</sup> <code>sup</code></p>
                <p><u>Underline</u> <code>u</code></p>
              </div>
            </div>
          </article>
          <p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
          <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
          <article aria-label="Links examples">
            <a href="#" onclick="event.preventDefault()">Primary</a><br />
            <a href="#" onclick="event.preventDefault()" class="secondary"
              >Secondary</a
            ><br />
            <a href="#" onclick="event.preventDefault()" class="contrast"
              >Contrast</a
            ><br />
            <footer class="code">
              <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
            </footer>
          </article>
          <p>Blockquote:</p>
          <article aria-label="Blockquote example">
            <blockquote>
              "Maecenas vehicula metus tellus, vitae congue turpis hendrerit
              non. Nam at dui sit amet ipsum cursus ornare."
              <footer>
                <cite>- Phasellus eget lacinia</cite>
              </footer>
            </blockquote>
            <footer class="code">
              <pre><code>&lt;<b>blockquote</b>&gt;
  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
  Nam at dui sit amet ipsum cursus ornare."
  &lt;<b>footer</b>&gt;
    &lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
  &lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</code></pre>
            </footer>
          </article>
        </section>

        ${require('./_footer.html')}
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
